<template>
  <div id="oil">
    <Headers :title="$t('oil.title')"/>
    <commonBg>
      <div class="bank_num">
        <p class="title">{{$t("oil.oilTotal")}}</p>
        <div class="many">
          <p class="fontBlods">{{oilNum}}</p>
          <p>{{types}}</p>
        </div>
      </div>
    </commonBg>
    <div class="option-btn">
      <button @click="isShow = true">
        <img src="../../assets/start.png" alt>
      </button>
      <button>
        <img src="../../assets/stop.png" alt>
      </button>
    </div>
    <div class="recent-trading">
      <span>{{$t("asset.assetsDetail.transactions")}}</span>
    </div>
    <div class="lists-container">
      <div class="isLength" v-if="lists.listArray.length">
        <List :lists="lists"/>
      </div>
      <div class="noLength" v-if="!lists.listArray.length">
        <img src="../../assets/null.png" alt>
        <p>{{$t("oil.nullStatus")}}</p>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="popup-layer" @click="closeLayer($event)" v-if="isShow">
      <div class="popup-container">
        <div class="popup-box">
          <h4 class="popup-title">{{$t("oil.openBX")}}</h4>
          <div>
            <input type="tel" v-model="oilbox.openNum" :placeholder="$t('oil.inputNum')">
          </div>
          <div>
            <input type="text" v-model="oilbox.pwd" :placeholder="$t('oil.assetsPwd')">
          </div>
          <div class="popupBtn">
            <button @click="submitOil">
              <img src="../../assets/ok_btn.png" alt>
            </button>
            <button @click="isShow = false">
              <img src="../../assets/cancel_btn.png" alt>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import List from "components/Lists";
import commonBg from "components/CommonBg";
export default {
  name: "oil",
  data() {
    return {
      oilNum: 1058.48,
      types: "EOC",
      isShow: false,
      lists: {
        type: "oil",
        listArray: []
      },
      oilbox: {
        openNum: "",
        pwd: ""
      }
    };
  },
  methods: {
    closeLayer({ target: { className } }) {
      if (className == "popup-layer") {
        this.isShow = false;
      }
    },
    submitOil() {
      if (!isNaN(this.oilbox.openNum) && this.oilbox.pwd) {
        this.isShow = false;
        console.log(this.oilbox);
      } else {
        alert("内容未填写完整!!!!");
      }
    }
  },
  watch: {
    isShow(isWatch) {
      // 监听关闭的状态是否为false 如果为false那么就是关闭了弹窗 我们可以把input框清除
      if (!isWatch) {
        this.oilbox = {
          openNum: "",
          pwd: ""
        };
      }
    }
  },
  components: {
    commonBg,
    List
  },
  mounted() {
    this.lists.listArray = [
      {
        icon: require("../../assets/payicon.png"),
        name: "2019-1-3 14:00:37",
        amount: "-685.6800",
        color: "#F55685",
        size: 16
      },
      {
        icon: require("../../assets/payicon.png"),
        name: "2019-1-3 14:00:37",
        amount: "+458.4836",
        color: "#01F8EF",
        size: 16
      },
      {
        icon: require("../../assets/payicon.png"),
        name: "2019-1-3 14:00:37",
        amount: "+458.4836",
        color: "#01F8EF",
        size: 16
      }
    ];
  }
};
</script>

<style lang="stylus" scoped>
@import '../../utils/styl/mixin'
#oil
  width 100%
  positCenter(0, 0, 0, 0, 0, 0)
  background-color $bodyBg
  .bank_num
    width rem(255)
    height rem(255)
    margin 0 auto
    text-align center
    bgImg('../../assets/bankasset_bg.png', contain)
    display flex
    flex-direction column
    justify-content center
  .title, .many
    color $fontColor
  .title
    font-size rem(15)
    margin-bottom rem(9)
  .many
    p
      font-size rem(15)
      margin-right rem(7)
    .fontBlods
      font-size rem(30)
      font-weight bold
      letter-spacing rem(-2)
      margin-bottom rem(10)
  .option-btn
    background-color $tabBarBg
    margin-top rem(-32)
    height rem(70)
    width 100%
    display flex
    justify-content space-between
    box-sizing border-box
    padding 0 rem(20)
    button
      width rem(120)
      height rem(61)
      img
        width 100%
        height 100%
        object-fit contain
  .recent-trading
    margin rem(20) 0 rem(12)
    text-align left
    color #fff
    span
      width rem(84)
      line-height rem(27)
      background-color $listBg
      font-size rem(14)
      color $colors
      display block
      padding-left rem(30)
      border-top-right-radius rem(25)
      border-bottom-right-radius rem(25)
  .lists-container
    position relative
    min-height rem(100)
    .noLength
      positCenter(50%, 50%, 0, 0, -50%, -50%)
      img
        width rem(37)
        height rem(41)
      p
        font-size rem(14)
        margin-top rem(4)
        color $tabBarColor
  .popup-layer
    position fixed
    top 0
    left 0
    bottom 0
    width 100%
    background-color $popupLayer
    z-index 10
    .popup-container
      width rem(346)
      height rem(275)
      positCenter(50%, 50%, auto, auto, -50%, -50%)
      border rem(1) solid $borderColor
      border-radius rem(10)
      box-sizing border-box
      padding rem(10) rem(8)
      background-color $layerBg
      .popup-box
        width 100%
        height 100%
        border-radius rem(10)
        background-color $listBg
        .popup-title
          padding rem(31) 0 0
          font-size rem(15)
          color $fontColor
        div
          box-sizing border-box
          padding 0 rem(35)
          margin-top rem(17)
          input
            display block
            width 100%
            height rem(35)
            box-sizing border-box
            padding rem(8) rem(15)
            background-color $inputBg
            border-radius rem(25)
            color $fontColor
            font-size rem(14)
        .popupBtn
          display flex
          justify-content space-between
          button
            width rem(124)
            height rem(44)
            img
              width 100%
              height 100%
              object-fit contain
</style>
